z - index

Internet Explorer/Internet Explorer

Netscape/Netscape

Opera/Opera

Safari/Safari

Firefox/Firefox

6.0

7.0

8.0

8.0

9.0

8.0

9.2

9.5

1.3

2.0

3.1

1.5

2.0

3.0

Помилки

Помилки

Так

Так

Так

Так

Так

Так

Так

Так

Так

Помилки

Помилки

Так

Коротка інформація

CSS

CSS2

Значення за умовчанням

auto

Наслідує

Ні

Застосовується

До будь-яких елементів, що позиціонуються

Аналог HTML

Ні

Посилання на специфікацію

http://www.w 3.org/TR/CSS21/visuren.html#propdef - z - index

Опис

Будь-які елементи, що позиціонуються, на веб-сторінці можуть накладатися один на одного в певному порядку, імітуючи тим самим третій вимір, перпендикулярний екрану. Кожен елемент може знаходитися як нижче, так і вище за інші об'єкти веб-сторінки, їх розміщенням по z -оси і управляє z - index. Ця властивість працює тільки для елементів, у яких значення position задане як absolute, fixed або relative.

Синтаксис

z - index: число | auto | inherit

Значення

В якості значення використовуються цілі числа (позитивні, негативні і нуль). Чим більше значення, тим вище знаходиться елемент в порівнянні з тими елементами, у яких воно менше. При рівному значенні z - index, на передньому плані знаходиться той елемент, який в коді HTML описаний нижче. Хоча специфікація і дозволяє використовувати негативні значення z - index, але такі елементи не відображаються у браузерах Netscape і Firefox до версії 2.0 включно.

Окрім числових значень застосовується auto - порядок елементів в цьому випадку будується автоматично, виходячи з їх положення в коді HTML і приналежності до батька, оскільки дочірні елементи мають той же номер, що їх батьківський елемент. Значення inherit вказує, що воно наслідує у батька.

Приклад

HTML 4.0  CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">
    <title>z - index</title>
    <style type="text/css">
      #layer1, #layer2, #layer3, #layer4 {
        position: relative; /* Відносне позиціонування */
      } 
      #layer1, #layer3 {
        font - size: 50px; /* Розмір шрифту в пікселах */
        color: #000080; /* Синій колір тексту */
      }
      #layer2, #layer4 {
        top: - 55px; /* Зрушуємо текст вверх */
        left: 5px; /* Зрушуємо текст управо */
        color: #ffa500; /* Помаранчевий колір тексту */
        font - size :70 px;  /* Розмір шрифту в пікселах */
      }
      #layer1 { z - index: 2; }
      #layer2 { z - index: 1; }
      #layer3 { z - index: 3; }
      #layer4 { z - index: 4; }
    </style>
  </head>
  <body>
    <p>Шар 1 вгорі</p>
    <div id="layer1">Шар 1</div>
    <div id="layer2">Шар 2</div> 
    <p>Шар 4 вгорі</p>
    <div id="layer3">Шар 3</div>
    <div id="layer4">Шар 4</div> 
  </body>
</html>

Результат цього прикладу показаний ні мал. 1.

Мал. 1. Застосування властивості z - index

Об'єктна модель

[window.]document.getElementById("elementID").style.zIndex

Браузери

Список, створений за допомогою тега <SELECT>, у браузері Internet Explorer 6 завжди відображається поверх інших елементів, незважаючи на значення z - index.

Internet Explorer до сьомої версії включно не підтримує значення inherit і інтерпретує auto як 0.

У браузері Firefox до версії 2.0 включно негативне значення z - index розташовувало елемент розташовує елемент нижче за фон веб-сторінки і його контенту.